<script setup>
import {onMounted, ref} from 'vue'
import {usegoodsStore} from "@/stores/goods.js";
import {Plus} from '@element-plus/icons-vue'

const goodsStore = usegoodsStore()

const searchForm = ref({
  name: ''
})
const search = () => {
  console.log(searchForm.value)
  if (searchForm.value.name) {
    tableData.value = fuzzySearchInObjects("al", tableData.value, "name")
  } else {
    tableData.value = goodsStore.goodsInfo
  }
}
//模糊查询
// 对象数组的模糊查询函数
function fuzzySearchInObjects(query, data, property) {
  const lowerCaseQuery = query.toLowerCase();
  return data.filter(item => item[property].toLowerCase().includes(lowerCaseQuery));
}

// 表格数据
const tableData = ref([
  {
    name: '可乐',//商品名称
    price: '¥ 30.00',//价格
    status: 1,//状态
    img: 'https://q5.itc.cn/images01/20240730/afe57e39449643949a8cbb53f50f1f6d.jpeg',//图片
    time: '2023-01-01'
  },
])
//表格功能
const handleClick = (title, row) => {

  if (title === '查看') {
    dialogData.value.dialogVisible = true
    dialogData.value.title = "查看商品"
    dialogData.value.disabled = true
    form.value = row
  } else if (title === '编辑') {
    dialogData.value.dialogVisible = true
    dialogData.value.title = "编辑商品"
    dialogData.value.disabled = false
    form.value = row
    console.log(row, `编辑23142334`)
  } else if (title === '删除') {
    ElMessageBox.confirm(
        '是否确定删除这一项数据?',
        '删除',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
        .then(() => {
          goodsStore.del(row.id)
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消删除',
          })
        })
  }
}
//分页器
const pageData = ref({
  currentPage: 1,
  pageSize: 10,
  total: 10
})

const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`)
}
const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`)
}
//添加按钮
const addUser = () => {
  dialogData.value.dialogVisible = true
  dialogData.value.title = "添加商品"
  dialogData.value.disabled = false
  form.value = {
    name: '',//商品名称
    price: '',//价格
    status: "",//状态
    img: 'https://q5.itc.cn/images01/20240730/afe57e39449643949a8cbb53f50f1f6d.jpeg',//图片
    time: ''
  }


}
onMounted(() => {
  console.log('订单页面加载')
  tableData.value = goodsStore.goodsInfo
})
// 上传图片
const imageUrl = ref('')

const handleAvatarSuccess = (
    response,
    uploadFile
) => {
  console.log(uploadFile, `9999999`)
  // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload = (rawFile) => {

  return true
}


//==============================弹窗
const dialogData = ref({
  dialogVisible: false,
  title: '',
  disabled: false,
  handleClose: () => {
    dialogData.value.dialogVisible = false
  }
  ,
  handleClick: () => {
    console.log('点击了确定', form.value)
    if (dialogData.value.title === "添加商品") {
      form.value.id = goodsStore.goodsInfo.length
      if (goodsStore.goodsInfo[goodsStore.goodsInfo.length - 1].id !== form.value.id) {
        goodsStore.increment(form.value)
      }

    } else if (dialogData.value.title === "编辑商品") {
      goodsStore.edit(form.value)
    }

    dialogData.value.dialogVisible = false
  }

})
//弹窗里面的输入框
const form = ref({
  name: '',//商品名称
  price: '',//价格
  status: 1,//状态
  img: 'https://q5.itc.cn/images01/20240730/afe57e39449643949a8cbb53f50f1f6d.jpeg',//图片
  time: ''
})
</script>

<template>
  <div class="goods">
    <!--  搜索页面-->、
    <div class="goods_search">
      <el-input v-model="searchForm.name" placeholder="请输入商品名称"></el-input>
      <el-button style="margin-left: 20px" type="primary" @click="search">搜索</el-button>
      <el-button link type="primary" size="small" @click="addUser">
        增加
      </el-button>
    </div>
    <!-- 内容部分   -->
    <div class="goods_main">
      <div class="goods_table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="name" label="商品名称"></el-table-column>
          <!--          账号状态-->
          <el-table-column prop="status" label="状态">
            <template #default="scope">
              <el-tag v-if="scope.row.status==1" type="success">起售</el-tag>
              <el-tag v-else type="danger">停售</el-tag>
            </template>
          </el-table-column>
          <!--          图片-->
          <el-table-column label="图片">
            <template #default="scope">
              <img :src="scope.row.img" alt="" style="width: 50px;height: 50px">
            </template>
          </el-table-column>
          <el-table-column prop="time" label="创建时间"></el-table-column>
          <el-table-column fixed="right" label="操作按钮" min-width="120">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="handleClick('查看', scope.row)">查看</el-button>
              <el-button link type="primary" size="small" @click="handleClick('编辑', scope.row)">编辑</el-button>
              <el-button link type="primary" size="small" @click="handleClick('删除',scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>


      </div>
      <div class="goods_page">
        <el-pagination
            v-model:current-page="pageData.currentPage"
            v-model:page-size="pageData.pageSize"
            :page-sizes="[1, 5,10, 20]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>

  <el-dialog
      v-model="dialogData.dialogVisible"
      :title="dialogData.title"
      width="500"
      :before-close="dialogData.handleClose"
  >
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="商品名称">
        <el-input v-model="form.name"
                  :disabled="dialogData.disabled"
        ></el-input>
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="form.price"
                  :disabled="dialogData.disabled"
        ></el-input>
      </el-form-item>
      <el-form-item label="图片">
        <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.img" :src="form.img" class="avatar" alt=""/>
          <el-icon v-else class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
            v-model="form.time"
            type="date"
            :disabled="dialogData.disabled"
            placeholder="请选择下单时间"
            style="width: 100%"
        />
      </el-form-item>

      <el-form-item label="商品状态:">
        <el-radio-group v-model="form.status"
                        :disabled="dialogData.disabled"
        >
          <el-radio :value="1">起售</el-radio>
          <el-radio :value="2">停售</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogData.handleClick" v-if="!dialogData.disabled">确定</el-button>
        <el-button type="primary" @click="dialogData.dialogVisible=false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>

<style scoped lang="scss">
.goods {
  width: 100%;
  display: flex;
  flex-direction: column;

  .goods_search {
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .goods_main {
    width: 100%;
    height: 100%;

    .goods_table {
      width: 100%;

    }

    .goods_page {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
  }
}

:deep(.avatar-uploader .avatar) {
  width: 178px;
  height: 178px;
  display: block;
  border: #8c939d solid 1px;
}

:deep(.avatar-uploader .el-upload ) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover ) {
  border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon ) {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
